<template>
  <main class="flex flex-1 items-center flex-col mb-16">
    <div
      class="bg-white w-full flex flex-col items-center justify-center bg-cover bg-center p-2 sm:py-10 px-3 mb-3 sm:mb-0"
      style="min-height:100vh">
      <div
        class="mx-auto sm:w-112 w-full max-w-lg rounded-2xl bg-white border-1 border-cadet-blue font-medium text-base text-cape-cod p-6 duration-500 transition-opacity opacity-100">
        <div class="flex flex-col items-center text-center">
          <h1 class="mb-3">Something went wrong!</h1>
          <p class="mb-10">Sorry, this is our fault. <br><br>Our team has been notified about this and we will try to
            stop it happening again!</p>
          <router-link class="flex flex-row justify-center items-center gap-2 cursor-pointer text-ink"
            :to="{path: '/'}">
            Go to
            home</router-link>
        </div>
      </div>
    </div>
  </main>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    return {};
  }
})
</script> 
